﻿
@{
    ViewBag.Title = "分类列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/styles/typeList.css" rel="stylesheet" />
<div id="app" v-cloak>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="height:60px;line-height:60px;padding-left:40px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>歌曲类型</el-breadcrumb-item>
            <el-breadcrumb-item><font style="font-weight:800">{{country.CountryName}}</font></el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="content">
            <el-col :span="8" class="left">
                <font style="font-size:28px;font-weight:700">
                    {{country.CountryName}}专区
                </font><br />
                <img :src="country.CountryImg" style="width:180px;height:180px;padding-top:20px;" />
                <h4>XX介绍</h4>
            </el-col>
            <el-col :span="16">
                <span><font style="font-size:28px;font-weight:700">歌曲列表</font> <font style="font-size:14px;padding-left:20px;">{{pagenation.totalCount}}首歌</font></span>
                <el-table :data="MusicLists" ref="MusicLists" stripe v-loading="dataLodaing">
                    <template slot="empty">
                        <p>{{dataText}}</p>
                    </template>
                    <el-table-column type="index" width="80" label="序号">
                    </el-table-column>                  
                    <el-table-column prop="Musics.MusicName" label="歌曲名" width="220" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="Singer.SingerName" label="歌手" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link :underline="false" @@click="singerLink(scope.row.Singer.SingerId)">{{scope.row.Singer.SingerName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Albums.AlbumName" label="专辑" width="150" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-link :underline="false" @@click="albumLink(scope.row.Albums.AlbumId)">{{scope.row.Albums.AlbumName}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Musics.MusicLong" label="时长" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="ListenMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-headset" style="font-size:18px;" title="试听"></i></el-button>
                            <el-button v-on:click="BuyMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-shopping-cart-2" style="font-size:18px;" title="选购"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="MusicLists.length != 0" class="typePage">
                    <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" :page-size="30">
                    </el-pagination>
                </div>

            </el-col>
        </el-row>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return{
                country: {
                    CountryName: '华语',
                    CountryImg: '',
                    CountryId:'@ViewData["countryId"]'
                },
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                MusicLists: [
                ],
                dataLodaing: false,
                dataText: "" ,
            }
        },
        created() {
            this.GetCountryInfo();
            this.dataLodaing = true;
            this.GetMusicLists();
        },
        methods:{
            GetCountryInfo() {
                axios.post('/Music/GetCountryInfo').then(res => {
                    this.country=res.data.data
                })
            },
            GetMusicLists() {
                axios.post('/Music/GetCountryMusicLists', { 'CurrentPage': this.pagenation.currentPage, 'CountryId': this.country.CountryId }).then(res => {
                    this.MusicLists = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;

                })
            },
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetMusicLists();
            },//分页当前页改变
            ListenMusic(row) {
                console.log(row);
                let info = JSON.parse(localStorage.getItem("ListenMusicLists")) || []
                console.log(info);
                if (info.length==0) {
                    console.log(row.Musics.MusicId);
                    let music = [{
                        'MusicId': row.Musics.MusicId,
                        'cover': '../musicImg/cover3.jpg',
                        'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                        'title': row.Musics.MusicName + '-' + row.Singer.SingerName,
                    }]
                    localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                    $(function () {
                        var setConfig = {
                            song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                            error: function (meg) {
                                console.log(meg);
                            }
                        };
                        var audioFn = audioPlay(setConfig);
                        if (audioFn) {
                            audioFn.loadFile(true);
                        }
                    });
                    this.$message({
                        message: '正在播放，请稍等...',
                        type: 'success'
                    });
                    axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                }
                if (info.length!=0) {
                    if (info[0].MusicId != row.Musics.MusicId) {
                        let music = [{
                            'MusicId': row.Musics.MusicId,
                            'cover': '../musicImg/cover3.jpg',
                            'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                            'title': row.Musics.MusicName + '-' + row.Singer.SingerName,
                        }]
                        localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                        $(function () {
                            var setConfig = {
                                song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                                error: function (meg) {
                                  
                                }
                            };
                            var audioFn = audioPlay(setConfig);
                            if (audioFn) {
                                audioFn.loadFile(true);
                            }
                        });
                        this.$message({
                            message: '正在播放，请稍等...',
                            type: 'success'
                        });
                        axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                    }
                }              
            },
            BuyMusic(row) {
                var lists = localStorage.getItem('BuyLists')
                lists = lists ? JSON.parse(lists) : [];
                const buy = {
                    'id': row.Musics.MusicId,
                    'MusicName': row.Musics.MusicName,
                    'SingerName': row.Singer.SingerName,
                    'MusicLong': row.Musics.MusicLong,
                    'MusicBit': row.Musics.MusicBitRate,
                    'MusicAblum': row.Albums.AlbumName
                }
                let count = 0;
                if (lists.length > 0) {
                    for (var i = 0; i < lists.length; i++) {
                        if (row.Musics.MusicId == lists[i].id) {
                            count=  count+1;
                            this.$message.error('已经存在此歌曲!');
                            break;
                        }
                    }
                }
                if (count == 0) {
                    lists.push(buy);
                    this.$message({
                        message: '成功加入购物车',
                        type: 'success'
                    });
                }
                localStorage.setItem("BuyLists", JSON.stringify(lists));

            },
            singerLink(id) {
                window.open('/Music/SingerdetailInfo?id=' + id, "_blank");
            },
            albumLink(id) {
                window.open('/Album/AlbumList?id=' + id, "_blank");
            }
        },
    })
    $(function () {

    })
</script>

